<title>选项卡</title>

<div class="content-header row">
	 <div class="content-header-left col-md-8 col-12 mb-2 breadcrumb-new">
	 	<h3 class="content-header-title mb-0 d-inline-block">选项卡</h3>
	 	<div class="row breadcrumbs-top d-inline-block">
	 		<div class="breadcrumb-wrapper mr-1">
	 			<ol class="breadcrumb">
	 				<li class="breadcrumb-item"><a href="/dashboard" class="menu-router">首页</a></li>
	 				<li class="breadcrumb-item"><a href="javascript:;">组件</a></li>
	 				<li class="breadcrumb-item active">选项卡</li>
	 			</ol>
	 		</div>
	 	</div>
	 </div>
</div>

<div class="content-body">
<!-- Basic tabs start -->
<section id="basic-tabs-components">
	<div class="row match-height">
		<div class="col-xl-6 col-lg-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Basic Tabs</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Takes the basic nav from above and adds the <code>.nav-tabs</code> class to generate a tabbed interface. </p>
						<ul class="nav nav-tabs">
							<li class="nav-item">
								<a class="nav-link active" id="base-tab1" data-toggle="tab" aria-controls="tab1" href="#tab1" aria-expanded="true">Home</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" id="base-tab2" data-toggle="tab" aria-controls="tab2" href="#tab2" aria-expanded="false">Profile</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" id="base-tab3" data-toggle="tab" aria-controls="tab3" href="#tab3" aria-expanded="false">Account</a>
							</li>
							<li class="nav-item">
								<a class="nav-link disabled">Disabled</a>
							</li>
						</ul>
						<div class="tab-content px-1 pt-1">
							<div role="tabpanel" class="tab-pane active" id="tab1" aria-expanded="true" aria-labelledby="base-tab1">
								<p>Oat cake marzipan cake lollipop caramels wafer pie jelly beans. Icing halvah chocolate cake carrot cake. Jelly beans carrot cake marshmallow gingerbread chocolate cake. Gummies cupcake croissant.</p>
							</div>
							<div class="tab-pane" id="tab2" aria-labelledby="base-tab2">
								<p>Sugar plum tootsie roll biscuit caramels. Liquorice brownie pastry cotton candy oat cake fruitcake jelly chupa chups. Pudding caramels pastry powder cake soufflé wafer caramels. Jelly-o pie cupcake.</p>
							</div>
							<div class="tab-pane" id="tab3" aria-labelledby="base-tab3">
								<p>Biscuit ice cream halvah candy canes bear claw ice cream cake chocolate bar donut. Toffee cotton candy liquorice. Oat cake lemon drops gingerbread dessert caramels. Sweet dessert jujubes powder sweet sesame snaps.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-6 col-lg-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Tabs with dropdown</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>You can activate a tab navigation by simply specifying <code>data-toggle="tab"</code> on an element.</p>
						<ul class="nav nav-tabs">
							<li class="nav-item">
								<a class="nav-link" id="home-tab" data-toggle="tab" href="#home" aria-controls="home" aria-expanded="true">Home</a>
							</li>
							<li class="nav-item">
								<a class="nav-link active" id="profile-tab" data-toggle="tab" href="#profile" aria-controls="profile" aria-expanded="false">Profile</a>
							</li>
							<li class="nav-item dropdown">
								<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
								Dropdown
								</a>
								<div class="dropdown-menu">
									<a class="dropdown-item" id="dropdown1-tab" href="#dropdown1" data-toggle="tab" aria-controls="dropdown1" aria-expanded="true">@fat</a>
									<a class="dropdown-item" id="dropdown2-tab" href="#dropdown2" data-toggle="tab" aria-controls="dropdown2" aria-expanded="true">@mdo</a>
								</div>
							</li>
							<li class="nav-item">
								<a class="nav-link" id="about-tab" data-toggle="tab" href="#about" aria-controls="about" aria-expanded="false">About</a>
							</li>
						</ul>
						<div class="tab-content px-1 pt-1">
							<div role="tabpanel" class="tab-pane" id="home" aria-labelledby="home-tab" aria-expanded="true">
								<p>Candy canes donut chupa chups candy canes lemon drops oat cake wafer. Cotton candy candy canes marzipan carrot cake. Sesame snaps lemon drops candy marzipan donut brownie tootsie roll. Icing croissant bonbon biscuit gummi bears.</p>
							</div>
							<div class="tab-pane active" id="profile" role="tabpanel" aria-labelledby="profile-tab" aria-expanded="false">
								<p>Pudding candy canes sugar plum cookie chocolate cake powder croissant. Carrot cake tiramisu danish candy cake muffin croissant tart dessert. Tiramisu caramels candy canes chocolate cake sweet roll liquorice icing cupcake.</p>
							</div>
							<div class="tab-pane" id="dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab" aria-expanded="false">
								<p>Cake croissant lemon drops gummi bears carrot cake biscuit cupcake croissant. Macaroon lemon drops muffin jelly sugar plum chocolate cupcake danish icing. Soufflé tootsie roll lemon drops sweet roll cake icing cookie halvah cupcake.</p>
							</div>
							<div class="tab-pane" id="dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab" aria-expanded="false">
								<p>Chocolate croissant cupcake croissant jelly donut. Cheesecake toffee apple pie chocolate bar biscuit tart croissant. Lemon drops danish cookie. Oat cake macaroon icing tart lollipop cookie sweet bear claw.</p>
							</div>
							<div class="tab-pane" id="about" role="tabpanel" aria-labelledby="about-tab" aria-expanded="false">
								<p>Carrot cake dragée chocolate. Lemon drops ice cream wafer gummies dragée. Chocolate bar liquorice cheesecake cookie chupa chups marshmallow oat cake biscuit. Dessert toffee fruitcake ice cream powder tootsie roll cake.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Basic tabs start -->

<!-- Tabs with Icons start -->
<section id="tabs-with-icons">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Tabs with Icons</h4>
			<p>Icon on left,right &amp; both side of the tab. Only icons tabs also available.</p>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-xl-6 col-lg-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Basic Tabs</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<ul class="nav nav-tabs">
							<li class="nav-item">
							<a class="nav-link active" id="baseIcon-tab1" data-toggle="tab" aria-controls="tabIcon1" href="#tabIcon1" aria-expanded="true"><i class="ft-aperture"></i> Tab 1</a>
							</li>
							<li class="nav-item">
							<a class="nav-link" id="baseIcon-tab2" data-toggle="tab" aria-controls="tabIcon2" href="#tabIcon2" aria-expanded="false"><i class="ft-bell"></i> Tab 2</a>
							</li>
							<li class="nav-item">
							<a class="nav-link" id="baseIcon-tab3" data-toggle="tab" aria-controls="tabIcon3" href="#tabIcon3" aria-expanded="false"><i class="ft-compass"></i> Tab 3</a>
							</li>
							<li class="nav-item">
								<a class="nav-link disabled"><i class="ft-gitlab"></i> Disabled</a>
							</li>
						</ul>
						<div class="tab-content px-1 pt-1">
							<div role="tabpanel" class="tab-pane active" id="tabIcon1" aria-expanded="true" aria-labelledby="baseIcon-tab1">
								<p>Oat cake marzipan cake lollipop caramels wafer pie jelly beans. Icing halvah chocolate cake carrot cake. Jelly beans carrot cake marshmallow gingerbread chocolate cake. Gummies cupcake croissant.</p>
							</div>
							<div class="tab-pane" id="tabIcon2" aria-labelledby="baseIcon-tab2">
								<p>Sugar plum tootsie roll biscuit caramels. Liquorice brownie pastry cotton candy oat cake fruitcake jelly chupa chups. Pudding caramels pastry powder cake soufflé wafer caramels. Jelly-o pie cupcake.</p>
							</div>
							<div class="tab-pane" id="tabIcon3" aria-labelledby="baseIcon-tab3">
								<p>Biscuit ice cream halvah candy canes bear claw ice cream cake chocolate bar donut. Toffee cotton candy liquorice. Oat cake lemon drops gingerbread dessert caramels. Sweet dessert jujubes powder sweet sesame snaps.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-6 col-lg-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Icons Tabs with dropdown</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<ul class="nav nav-tabs">
							<li class="nav-item">
							<a class="nav-link" id="homeIcon-tab" data-toggle="tab" href="#homeIcon" aria-controls="homeIcon" aria-expanded="true"><i class="ft-box"></i> Home</a>
							</li>
							<li class="nav-item">
							<a class="nav-link active" id="profileIcon-tab" data-toggle="tab" href="#profileIcon" aria-controls="profileIcon" aria-expanded="false"><i class="ft-user"></i> Profile</a>
							</li>
							<li class="nav-item dropdown">
								<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
							<i class="ft-edit"></i> Dropdown
								</a>
								<div class="dropdown-menu">
									<a class="dropdown-item" id="dropdownIcon1-tab" href="#dropdownIcon1" data-toggle="tab" aria-controls="dropdownIcon1" aria-expanded="true">@fat</a>
									<a class="dropdown-item" id="dropdownIcon2-tab" href="#dropdownIcon2" data-toggle="tab" aria-controls="dropdownIcon2" aria-expanded="true">@mdo</a>
								</div>
							</li>
							<li class="nav-item">
							<a class="nav-link" id="aboutIcon-tab" data-toggle="tab" href="#about" aria-controls="about" aria-expanded="false"><i class="ft-play"></i> About</a>
							</li>
						</ul>
						<div class="tab-content px-1 pt-1">
							<div role="tabpanel" class="tab-pane" id="homeIcon" aria-labelledby="homeIcon-tab" aria-expanded="true">
								<p>Candy canes donut chupa chups candy canes lemon drops oat cake wafer. Cotton candy candy canes marzipan carrot cake. Sesame snaps lemon drops candy marzipan donut brownie tootsie roll. Icing croissant bonbon biscuit gummi bears.</p>
							</div>
							<div class="tab-pane active" id="profileIcon" role="tabpanel" aria-labelledby="profileIcon-tab" aria-expanded="false">
								<p>Pudding candy canes sugar plum cookie chocolate cake powder croissant. Carrot cake tiramisu danish candy cake muffin croissant tart dessert. Tiramisu caramels candy canes chocolate cake sweet roll liquorice icing cupcake.</p>
							</div>
							<div class="tab-pane" id="dropdownIcon1" role="tabpanel" aria-labelledby="dropdownIcon1-tab" aria-expanded="false">
								<p>Cake croissant lemon drops gummi bears carrot cake biscuit cupcake croissant. Macaroon lemon drops muffin jelly sugar plum chocolate cupcake danish icing. Soufflé tootsie roll lemon drops sweet roll cake icing cookie halvah cupcake.</p>
							</div>
							<div class="tab-pane" id="dropdownIcon2" role="tabpanel" aria-labelledby="dropdownIcon2-tab" aria-expanded="false">
								<p>Chocolate croissant cupcake croissant jelly donut. Cheesecake toffee apple pie chocolate bar biscuit tart croissant. Lemon drops danish cookie. Oat cake macaroon icing tart lollipop cookie sweet bear claw.</p>
							</div>
							<div class="tab-pane" id="aboutIcon" role="tabpanel" aria-labelledby="aboutIcon-tab" aria-expanded="false">
								<p>Carrot cake dragée chocolate. Lemon drops ice cream wafer gummies dragée. Chocolate bar liquorice cheesecake cookie chupa chups marshmallow oat cake biscuit. Dessert toffee fruitcake ice cream powder tootsie roll cake.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="col-xl-6 col-lg-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Tabs with Only Icon</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use <code>.nav-only-icon</code> class when you use only icons, So that will increase font size.</p>
						<ul class="nav nav-tabs nav-only-icon nav-top-border no-hover-bg">
							<li class="nav-item">
							<a class="nav-link active" id="baseOnlyIcon-tab11" data-toggle="tab" aria-controls="tabOnlyIcon11" href="#tabOnlyIcon11" aria-expanded="true"><i class="ft-aperture"></i></a>
							</li>
							<li class="nav-item">
							<a class="nav-link" id="baseOnlyIcon-tab12" data-toggle="tab" aria-controls="tabOnlyIcon12" href="#tabOnlyIcon12" aria-expanded="false"><i class="ft-bell"></i></a>
							</li>
							<li class="nav-item">
							<a class="nav-link" id="baseOnlyIcon-tab23" data-toggle="tab" aria-controls="tabOnlyIcon13" href="#tabOnlyIcon13" aria-expanded="false"><i class="ft-compass"></i></a>
							</li>
							<li class="nav-item">
								<a class="nav-link disabled"><i class="ft-gitlab"></i></a>
							</li>
						</ul>
						<div class="tab-content px-1 pt-1">
							<div role="tabpanel" class="tab-pane active" id="tabOnlyIcon11" aria-expanded="true" aria-labelledby="baseOnlyIcon-tab11">
								<p>Oat cake marzipan cake lollipop caramels wafer pie jelly beans. Icing halvah chocolate cake carrot cake. Jelly beans carrot cake marshmallow gingerbread chocolate cake. Gummies cupcake croissant.</p>
							</div>
							<div class="tab-pane" id="tabOnlyIcon12" aria-labelledby="baseOnlyIcon-tab12">
								<p>Sugar plum tootsie roll biscuit caramels. Liquorice brownie pastry cotton candy oat cake fruitcake jelly chupa chups. Pudding caramels pastry powder cake soufflé wafer caramels. Jelly-o pie cupcake.</p>
							</div>
							<div class="tab-pane" id="tabOnlyIcon13" aria-labelledby="baseOnlyIcon-tab23">
								<p>Biscuit ice cream halvah candy canes bear claw ice cream cake chocolate bar donut. Toffee cotton candy liquorice. Oat cake lemon drops gingerbread dessert caramels. Sweet dessert jujubes powder sweet sesame snaps.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-6 col-lg-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Tabs with dropdown</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use <code>.nav-only-icon</code> class when you use only icons, So that will increase font size.</p>
						<ul class="nav nav-tabs nav-only-icon nav-top-border no-hover-bg">
							<li class="nav-item">
							<a class="nav-link" id="homeOnlyIcon-tab1" data-toggle="tab" href="#homeOnlyIcon1" aria-controls="homeOnlyIcon1" aria-expanded="true"><i class="ft-box"></i></a>
							</li>
							<li class="nav-item">
							<a class="nav-link active" id="profileOnlyIcon-tab1" data-toggle="tab" href="#profileOnlyIcon1" aria-controls="profileOnlyIcon1" aria-expanded="false"><i class="ft-user"></i></a>
							</li>
							<li class="nav-item dropdown">
								<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
							<i class="ft-edit"></i>
								</a>
								<div class="dropdown-menu">
									<a class="dropdown-item" id="dropdownOnlyIcon1-tab" href="#dropdownOnlyIcon1" data-toggle="tab" aria-controls="dropdownOnlyIcon1" aria-expanded="true">@fat</a>
									<a class="dropdown-item" id="dropdownOnlyIcon2-tab" href="#dropdownOnlyIcon2" data-toggle="tab" aria-controls="dropdownOnlyIcon2" aria-expanded="true">@mdo</a>
								</div>
							</li>
							<li class="nav-item">
							<a class="nav-link" id="aboutOnlyIcon1-tab" data-toggle="tab" href="#aboutOnlyIcon1" aria-controls="aboutOnlyIcon1" aria-expanded="false"><i class="ft-play"></i></a>
							</li>
						</ul>
						<div class="tab-content px-1 pt-1">
							<div role="tabpanel" class="tab-pane" id="homeOnlyIcon1" aria-labelledby="homeOnlyIcon-tab1" aria-expanded="true">
								<p>Candy canes donut chupa chups candy canes lemon drops oat cake wafer. Cotton candy candy canes marzipan carrot cake. Sesame snaps lemon drops candy marzipan donut brownie tootsie roll. Icing croissant bonbon biscuit gummi bears.</p>
							</div>
							<div class="tab-pane active" id="profileOnlyIcon1" role="tabpanel" aria-labelledby="profileOnlyIcon-tab1" aria-expanded="false">
								<p>Pudding candy canes sugar plum cookie chocolate cake powder croissant. Carrot cake tiramisu danish candy cake muffin croissant tart dessert. Tiramisu caramels candy canes chocolate cake sweet roll liquorice icing cupcake.</p>
							</div>
							<div class="tab-pane" id="dropdownOnlyIcon1" role="tabpanel" aria-labelledby="dropdownOnlyIcon1-tab" aria-expanded="false">
								<p>Cake croissant lemon drops gummi bears carrot cake biscuit cupcake croissant. Macaroon lemon drops muffin jelly sugar plum chocolate cupcake danish icing. Soufflé tootsie roll lemon drops sweet roll cake icing cookie halvah cupcake.</p>
							</div>
							<div class="tab-pane" id="dropdownOnlyIcon2" role="tabpanel" aria-labelledby="dropdownOnlyIcon2-tab" aria-expanded="false">
								<p>Chocolate croissant cupcake croissant jelly donut. Cheesecake toffee apple pie chocolate bar biscuit tart croissant. Lemon drops danish cookie. Oat cake macaroon icing tart lollipop cookie sweet bear claw.</p>
							</div>
							<div class="tab-pane" id="aboutOnlyIcon1" role="tabpanel" aria-labelledby="aboutOnlyIcon1-tab" aria-expanded="false">
								<p>Carrot cake dragée chocolate. Lemon drops ice cream wafer gummies dragée. Chocolate bar liquorice cheesecake cookie chupa chups marshmallow oat cake biscuit. Dessert toffee fruitcake ice cream powder tootsie roll cake.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Tabs with Icons end -->

<!-- Vertical Tabs start -->
<section id="vertical-tabs">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Vertical Tabs</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-xl-6 col-lg-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Vertical Left Tabs</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Wrap tabs and tab content with <code>.nav-vertical</code> class. To add left navigation use <code>.nav-left</code> class to <code>.nav.nav-tabs</code>.</p>						
					</div>
					<div class="nav-vertical p-2">
							<ul class="nav nav-tabs nav-left flex-column">
								<li class="nav-item">
									<a class="nav-link active" id="baseVerticalLeft-tab1" data-toggle="tab" aria-controls="tabVerticalLeft1" href="#tabVerticalLeft1" aria-expanded="true">Tab 1</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" id="baseVerticalLeft-tab2" data-toggle="tab" aria-controls="tabVerticalLeft2" href="#tabVerticalLeft2" aria-expanded="false">Tab 2</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" id="baseVerticalLeft-tab3" data-toggle="tab" aria-controls="tabVerticalLeft3" href="#tabVerticalLeft3" aria-expanded="false">Tab 3 </a>
								</li>
							</ul>
							<div class="tab-content px-1">
								<div role="tabpanel" class="tab-pane active" id="tabVerticalLeft1" aria-expanded="true" aria-labelledby="baseVerticalLeft-tab1">
									<p>Oat cake marzipan cake lollipop caramels wafer pie jelly beans. Icing halvah chocolate cake carrot cake. Jelly beans carrot cake marshmallow gingerbread chocolate cake. Gummies cupcake croissant.</p>
								</div>
								<div class="tab-pane" id="tabVerticalLeft2" aria-labelledby="baseVerticalLeft-tab2">
									<p>Sugar plum tootsie roll biscuit caramels. Liquorice brownie pastry cotton candy oat cake fruitcake jelly chupa chups. Pudding caramels pastry powder cake soufflé wafer caramels. Jelly-o pie cupcake.</p>
								</div>
								<div class="tab-pane" id="tabVerticalLeft3" aria-labelledby="baseVerticalLeft-tab3">
									<p>Biscuit ice cream halvah candy canes bear claw ice cream cake chocolate bar donut. Toffee cotton candy liquorice. Oat cake lemon drops gingerbread dessert caramels. Sweet dessert jujubes powder sweet sesame snaps.</p>
								</div>
							</div>
						</div>
				</div>
			</div>
		</div>
		<div class="col-xl-6 col-lg-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Vertical Right Tabs</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Wrap tabs and tab content with <code>.nav-vertical</code> class. To add right navigation use <code>.nav-right</code> class to <code>.nav.nav-tabs</code>.</p>						
					</div>
					<div class="nav-vertical p-2">
							<ul class="nav nav-tabs nav-right flex-column">
								<li class="nav-item">
									<a class="nav-link active" id="baseVerticalRight-tab1" data-toggle="tab" aria-controls="tabVerticalRight1" href="#tabVerticalRight1" aria-expanded="true">Tab 1</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" id="baseVerticalRight-tab2" data-toggle="tab" aria-controls="tabVerticalRight2" href="#tabVerticalRight2" aria-expanded="false">Tab 2</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" id="baseVerticalRight-tab3" data-toggle="tab" aria-controls="tabVerticalRight3" href="#tabVerticalRight3" aria-expanded="false">Tab 3 </a>
								</li>
							</ul>
							<div class="tab-content px-1">
								<div role="tabpanel" class="tab-pane active" id="tabVerticalRight1" aria-expanded="true" aria-labelledby="baseVerticalRight-tab1">
									<p>Oat cake marzipan cake lollipop caramels wafer pie jelly beans. Icing halvah chocolate cake carrot cake. Jelly beans carrot cake marshmallow gingerbread chocolate cake. Gummies cupcake croissant.</p>
								</div>
								<div class="tab-pane" id="tabVerticalRight2" aria-labelledby="baseVerticalRight-tab2">
									<p>Sugar plum tootsie roll biscuit caramels. Liquorice brownie pastry cotton candy oat cake fruitcake jelly chupa chups. Pudding caramels pastry powder cake soufflé wafer caramels. Jelly-o pie cupcake.</p>
								</div>
								<div class="tab-pane" id="tabVerticalRight3" aria-labelledby="baseVerticalRight-tab3">
									<p>Biscuit ice cream halvah candy canes bear claw ice cream cake chocolate bar donut. Toffee cotton candy liquorice. Oat cake lemon drops gingerbread dessert caramels. Sweet dessert jujubes powder sweet sesame snaps.</p>
								</div>
							</div>
						</div>
				</div>
			</div>
		</div>

		<div class="col-xl-6 col-lg-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Tabs with Icon</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>You can also add icons to the tab name.</p>						
					</div>
					<div class="nav-vertical p-2">
							<ul class="nav nav-tabs nav-left">
								<li class="nav-item">
								<a class="nav-link active" id="baseVerticalLeft2-tab1" data-toggle="tab" aria-controls="tabVerticalLeft21" href="#tabVerticalLeft21" aria-expanded="true"><i class="ft-box"></i> Home</a>
								</li>
								<li class="nav-item">
								<a class="nav-link" id="baseVerticalLeft2-tab2" data-toggle="tab" aria-controls="tabVerticalLeft22" href="#tabVerticalLeft22" aria-expanded="false"><i class="ft-user"></i> Profile</a>
								</li>
								<li class="nav-item">
								<a class="nav-link" id="baseVerticalLeft2-tab3" data-toggle="tab" aria-controls="tabVerticalLeft23" href="#tabVerticalLeft23" aria-expanded="false"><i class="ft-play"></i> About</a>
								</li>
							</ul>
							<div class="tab-content px-1">
								<div role="tabpanel" class="tab-pane active" id="tabVerticalLeft21" aria-expanded="true" aria-labelledby="baseVerticalLeft2-tab1">
									<p>Oat cake marzipan cake lollipop caramels wafer pie jelly beans. Icing halvah chocolate cake carrot cake. Jelly beans carrot cake marshmallow gingerbread chocolate cake. Gummies cupcake croissant.</p>
								</div>
								<div class="tab-pane" id="tabVerticalLeft22" aria-labelledby="baseVerticalLeft2-tab2">
									<p>Sugar plum tootsie roll biscuit caramels. Liquorice brownie pastry cotton candy oat cake fruitcake jelly chupa chups. Pudding caramels pastry powder cake soufflé wafer caramels. Jelly-o pie cupcake.</p>
								</div>
								<div class="tab-pane" id="tabVerticalLeft23" aria-labelledby="baseVerticalLeft2-tab3">
									<p>Biscuit ice cream halvah candy canes bear claw ice cream cake chocolate bar donut. Toffee cotton candy liquorice. Oat cake lemon drops gingerbread dessert caramels. Sweet dessert jujubes powder sweet sesame snaps.</p>
								</div>
							</div>
						</div>
				</div>
			</div>
		</div>
		<div class="col-xl-6 col-lg-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Tabs with Icon</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>You can also add icons to the tab name.</p>						
					</div>
					<div class="nav-vertical p-2">
							<ul class="nav nav-tabs nav-right">
								<li class="nav-item">
								<a class="nav-link active" id="baseVerticalRight2-tab1" data-toggle="tab" aria-controls="tabVerticalRight21" href="#tabVerticalRight21" aria-expanded="true"><i class="ft-box float-right"></i> Home</a>
								</li>
								<li class="nav-item">
								<a class="nav-link" id="baseVerticalRight2-tab2" data-toggle="tab" aria-controls="tabVerticalRight22" href="#tabVerticalRight22" aria-expanded="false"><i class="ft-user float-right"></i> Profile</a>
								</li>
								<li class="nav-item">
								<a class="nav-link" id="baseVerticalRight2-tab3" data-toggle="tab" aria-controls="tabVerticalRight23" href="#tabVerticalRight23" aria-expanded="false"><i class="ft-play float-right"></i> About</a>
								</li>
							</ul>
							<div class="tab-content px-1">
								<div role="tabpanel" class="tab-pane active" id="tabVerticalRight21" aria-expanded="true" aria-labelledby="baseVerticalRight2-tab1">
									<p>Oat cake marzipan cake lollipop caramels wafer pie jelly beans. Icing halvah chocolate cake carrot cake. Jelly beans carrot cake marshmallow gingerbread chocolate cake. Gummies cupcake croissant.</p>
								</div>
								<div class="tab-pane" id="tabVerticalRight22" aria-labelledby="baseVerticalRight2-tab2">
									<p>Sugar plum tootsie roll biscuit caramels. Liquorice brownie pastry cotton candy oat cake fruitcake jelly chupa chups. Pudding caramels pastry powder cake soufflé wafer caramels. Jelly-o pie cupcake.</p>
								</div>
								<div class="tab-pane" id="tabVerticalRight23" aria-labelledby="baseVerticalRight2-tab3">
									<p>Biscuit ice cream halvah candy canes bear claw ice cream cake chocolate bar donut. Toffee cotton candy liquorice. Oat cake lemon drops gingerbread dessert caramels. Sweet dessert jujubes powder sweet sesame snaps.</p>
								</div>
							</div>
						</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Vertical Tabs end -->
</div>

<script type="text/javascript">
	
</script>